<template>
  <div>
    <div>
      <el-button @click="showKeyCom=!showKeyCom">切换</el-button>
    </div>
    <template v-if="showKeyCom">
      <h1>组合键--hotkeys</h1>
      <div v-key-com.ctrl.r="()=>keCom('ctrl+r')">
        ctrl+r
      </div>
      <div v-key-com.ctrl.t="()=>keCom('ctrl+t')">
        ctrl+t -- 没用
      </div>
      <div v-key-com.ctrl.shift.t="()=>keCom('ctrl+shift+t')">
        ctrl+shift+t -- 没用
      </div>
      <div v-key-com.ctrl.alt.t="()=>keCom('ctrl+alt+t')">
        ctrl+alt+t
      </div>
      <div v-key-com.w.t="()=>keCom('w+t')">
        w+t
      </div>
      <div v-key-com.z.t="()=>keCom('z+t')">
        z+t
      </div>
    </template>
    <template v-if="!showKeyCom">
      <h1>组合键--自定义</h1>
      <div v-page-key-combination.ctrl.r="()=>keCom('ctrl+r')">
        ctrl+r -- 没用
      </div>
      <div v-page-key-combination.ctrl.t="()=>keCom('ctrl+t')">
        ctrl+t -- 没用
      </div>
      <div v-page-key-combination.ctrl.shift.t="()=>keCom('ctrl+shift+t')">
        ctrl+shift+t -- 没用
      </div>
      <div v-page-key-combination.ctrl.alt.t="()=>keCom('ctrl+alt+t')">
        ctrl+alt+t
      </div>
      <div v-page-key-combination.w.t="()=>keCom('w+t')">
        w+t
      </div>
      <div v-page-key-combination.z.t="()=>keCom('z+t')">
        z+t
      </div>
    </template>
  </div>
</template>

<script>
import {keyCom} from "@localModules/ZhiXinLib/directive/page-key-combination/keyCom";
import pageKeyCombination from "@localModules/ZhiXinLib/directive/page-key-combination/index";

export default {
  name: "index",
  directives:{
    keyCom,
    pageKeyCombination
  },
  data(){
    return{
      showKeyCom: true,
    }
  },
  methods:{
    keCom(ke){
      this.$message.success(ke)
    }
  }
}
</script>

<style scoped lang="scss">

</style>
